<!--
 * @Author: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
 * @Date: 2025-09-11 08:39:48
 * @LastEditors: 王冉欣 3535957686@qq.com
 * @LastEditTime: 2025-09-19 15:46:01
 * @FilePath: \23WRX\city\src\pages\components\Right2.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div>
    <Title :title="title"></Title>
    <div ref="right2" style="height: 150px;margin-top: 10px;"></div>
  </div>
</template>

<script>
import { Bar } from '@antv/g2plot';

export default {
  data() {
    return {
      title: '实时颗粒物曲线',
    }
  },
  methods: {
    loadBar(){
    const data = [
      { year: '1951 年', value: 38 },
      { year: '1952 年', value: 52 },
      { year: '1956 年', value: 61 },
      { year: '1957 年', value: 145 },
      { year: '1958 年', value: 48 },
    ];

    const bar = new Bar(this.$refs.right2, {
      data,
      xField: 'value',
      yField: 'year',
      seriesField: 'year',
      legend: {
        position: 'top-left',
      },
    });

    bar.render();
}
  },
  mounted() {
    this.loadBar()
  }
};
</script>
<style scoped></style>